<template>
  <div>
    <div class="cost-main">
      <div class="main-title">订单分类管理</div>
      <!-- 需添加权限 -->
      <el-button type="primary" plain size="small" style="background:#fff;color:#406EFF;width:120px;padding:7px 0px;" @click="toOpenKindTable">查看分类列表</el-button>
      <el-button v-if="hasRouteAuth('system:kind:add')" type="primary" plain size="small" style="background:#fff;color:#406EFF;width:120px;padding:7px 0px;" @click="addKind">添加分类</el-button>
    </div>
    <OrderKindDialog ref="orderKindDialog" @addOrderKind="addOrderKind" @orderKindEdit="orderKindEdit"/>
    <CreateOrderKindDialog ref="createOrderKindDialog" @update="update"/>
  </div>
</template>

<script>
// 组件
import Title from '@/components/Title';
import OrderKindDialog from './module/orderKindDialog';
import CreateOrderKindDialog from './module/createOrderKindDialog';
// api
import { hasRouteAuth } from '@/utils/permission';

export default {
  components: { Title, OrderKindDialog, CreateOrderKindDialog },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    hasRouteAuth,
    toOpenKindTable() {
      this.$refs.orderKindDialog.kindDialogVisible = true;
      const clientHeight = window.innerHeight;
      this.$refs.orderKindDialog.maxHeight = (clientHeight * 3) / 5;
      this.$refs.orderKindDialog.getkindList();
    },
    addKind() {
      this.$refs.createOrderKindDialog.kindShow = true;
      this.$refs.createOrderKindDialog.queryData = {};
    },
    addOrderKind() {
      this.$refs.createOrderKindDialog.kindShow = true;
      this.$refs.createOrderKindDialog.queryData = {};
    },
    orderKindEdit(scope) {
      this.$refs.createOrderKindDialog.kindShow = true;
      const data = {
        name: scope.row.orderKindName,
        id: scope.row.id
      };
      this.$refs.createOrderKindDialog.initInfo(data);
    },
    update() {
      this.$refs.orderKindDialog.getkindList();
    }
  }
};
</script>

<style lang="scss" scoped>
.cost-main {
  display: flex;
  align-items: center;
  .main-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color: #141C3D;
    margin-right: 32px;
  }
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style lang="scss">
.cost-config-dialog {
  .el-dialog {
    width: 800px !important;
  }
}
</style>
